<header>
    接口文档
</header>
<h2>
    绘制
</h2>
<h3>
    render
</h3>
<p>
    基础的绘制物体方法，需要传递一个json用以表示物体的属性：
</p>
<pre tag="javascript">
    painter.render(object3D)
</pre>
<p>
    传递的json我们称为Object3D类型，有固定的格式：
</p>
<button tag="Object3D" type="explain">Object3D格式</button>
<p>
    上述格式中的
    <span class="special">geometry.type</span>
    可以选择的值及其解释你可以
    <button tag="painter3D" type="explain">点击查看</button>
    。
</p>
<div class="warn">
    温馨提示：我们通过映射把原生的WebGL使用的左手坐标系变成了
    <span class="special">右手坐标系</span>
    ，矩阵的旋转也满足
    <span class="special">右手螺旋法则</span>。
</div>
<h3>
    review
</h3>
<p>
    触发所有物体全部重新渲染一次：
</p>
<pre tag="javascript">
    painter.review()
</pre>
<h2>
    控制
</h2>
<p>
    控制主要通过
    <a href="#/api/matrix4" target="_blank">变换矩阵 Matrix4</a>
    来实现。
</p>
<h3>
    getMatrix
</h3>
<p>
    返回世界坐标系上的矩阵对象，可以直接调用该矩阵上的方法来控制世界坐标的变换：
</p>
<pre tag="javascript">
    let matrix4  = painter.getMatrix()
</pre>
<h3>
    matrix
</h3>
<p>
    获取一个矩阵对象，参数initMatrix4可选：
</p>
<pre tag="javascript">
    let matrix4  = painter.matrix(initMatrix4)
</pre>
<h2>
    区域管理
</h2>
<p>
    有时候，我们可能需要和绘制的图表进行交互，比如点击的时候，需要知道点击的是哪个区域，就可以借助下面的方法：
</p>
<h3>
    设置区域
</h3>
<p>
    每次绘制一个区域前修改一下区域的名称，那么绘制的内容就会被记录起来：
</p>
<pre tag="javascript">
painter.setRegion(regionName)
</pre>
<div class="warn">
    温馨提示：此方法只对
    <span class="special">painter.render</span>
    外的绘制方法有效。
</div>
<h3>
    获取区域
</h3>
<p>
    比如点击了画布后，传递点击的位置，就可以返回当前位置所在区域的名称：
</p>
<pre tag="javascript">
painter.getRegion(x, y).then((regionName) => {
    // todo
})
</pre>
<h2>
    获取
</h2>
<h3>
    getObject3D
</h3>
<p>
    你可以通过此方法获取运行后的3D对象，在对其进行调整（比如修改纹理以达到“选中”效果）后，再使用
    <span class="special">painter.review</span>
    让页面重新渲染。
</p>
<pre tag="javascript">
    let object3Ds = painter.getObject3D()
</pre>